Skip to content

feat(website): Shiki syntax highlighting on landing page code blocks#111

Merged
blove merged 1 commit into
mainfrom
fix/code-syntax-highlighting
Apr 11, 2026
Merged

feat(website): Shiki syntax highlighting on landing page code blocks#111
blove merged 1 commit into
mainfrom
fix/code-syntax-highlighting

Conversation

@blove
Copy link
Copy Markdown
Contributor

@blove blove commented Apr 11, 2026

Summary

Code blocks on the /angular, /render, and /chat landing pages now have proper syntax highlighting using Shiki (tokyo-night theme), matching the docs pages.

  • Created shared HighlightedCode server component using codeToHtml from Shiki
  • Converted all 3 CodeShowcase components from client to server components (removed framer-motion dependency)
  • Highlights TypeScript, HTML, and CSS at build time — zero client-side JS
  • Proper language detection: TS for Angular/Chat code, HTML for render template, CSS for theming

Test plan

  • nx build website — success, all pages static
  • CI green
  • Visual check: code blocks show colored syntax

🤖 Generated with Claude Code

Convert CodeShowcase components from client to server components using
a shared HighlightedCode server component with codeToHtml (Shiki,
tokyo-night theme). Highlights TypeScript, HTML, and CSS snippets at
build time — zero client-side JS.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 11, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
cacheplane Ready Ready Preview, Comment Apr 11, 2026 3:35am

Request Review

@blove blove merged commit 896165e into main Apr 11, 2026
14 checks passed
@blove blove deleted the fix/code-syntax-highlighting branch May 7, 2026 16:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant